// 将echarts开发成vue插件引入
import echarts from 'echarts'
import {
    color
} from 'echarts/lib/theme/light';
//导入映射国家名字的文件
import worldName from '../utils/country'
//创建install函数
const install = function (Vue) {
    // js方法：给对象添加属性或者方法
    // Object.defineProperties('Object','属性','options配置内容或者配置项')
    // Object是原对象 options是操作原对象的配置信息
    Object.defineProperties(Vue.prototype, {
        $echarts: {
            get() {
                return {
                    //绘制折线---
                    line() {
                        console.log('绘制线');
                    },
                    //绘制地图---
                    chinaMap(id, data) {
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById(id));
                        // 指定图表的配置项和数据
                        var option = {
                            tooltip: {
                                triggerOn: 'click', //触发弹框条件 点击
                                enterable: true, //鼠标是否可进入提示框浮层中，默认为false
                                formatter: function (data) { //data={name:'',value:''}
                                    //注意return的符号，不是单引号
                                    return ` <a href='#/city/${data.name}' style="color:#fff; text-decoration:none;">
                                    <div>省份:${data.name} <div> 目前确诊人数:${data.value}</div></div></a>
                                    `
                                }
                            },
                            visualMap: [{
                                orient: "vertical",
                                type: "piecewise",
                                pieces: [ // 配置颜色区间
                                    {
                                        min: 0,
                                        max: 0,
                                        color: "#FFFFFF"
                                    },
                                    {
                                        min: 1,
                                        max: 10,
                                        color: "#FDFDCF"
                                    },
                                    {
                                        min: 10,
                                        max: 100,
                                        color: "#FE9E83"
                                    },
                                    {
                                        min: 100,
                                        max: 500,
                                        color: "#E55A4E"
                                    },
                                    {
                                        min: 500,
                                        max: 10000,
                                        color: "#4F070D"
                                    }
                                ]
                            }],
                            series: [{
                                name: "省",
                                type: "map",
                                map: 'china',
                                zoom: 1.2, //放大
                                label: {
                                    show: true, //是否显示省份名称
                                    fontSize: 9,
                                },
                                data
                            }],
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    },
                    //省份地图---
                    provinceMap(id, cityName, data) {
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById(id));
                        // 指定图表的配置项和数据
                        var option = {
                            tooltip: {
                                formatter: function (data) { //data={name:'',value:''}
                                    //注意return的符号，不是单引号
                                    return `
                                    <div>市:${data.name} <div> 现存确诊人数:${data.value}</div></div>
                                    `
                                }
                            },
                            visualMap: [{
                                orient: "vertical",
                                type: "piecewise",
                                pieces: [ // 配置颜色区间
                                    {
                                        min: 0,
                                        max: 0,
                                        color: "#FFFFFF"
                                    },
                                    {
                                        min: 1,
                                        max: 10,
                                        color: "#FDFDCF"
                                    },
                                    {
                                        min: 10,
                                        max: 100,
                                        color: "#FE9E83"
                                    },
                                    {
                                        min: 100,
                                        max: 500,
                                        color: "#E55A4E"
                                    },
                                    {
                                        min: 500,
                                        max: 10000,
                                        color: "#4F070D"
                                    }
                                ]
                            }],
                            series: [{
                                name: "市",
                                type: "map",
                                // 将城市名传过来
                                map: cityName,
                                zoom: 1.2, //放大
                                label: {
                                    show: true, //是否显示省份名称
                                    fontSize: 9,
                                },
                                data
                            }],
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    },
                    //绘制世界地图---
                    worldMap(id, data) {
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById(id));
                        // 指定图表的配置项和数据
                        var option = {
                            tooltip: {
                                formatter: function (data) { //data={name:'',value:''}
                                    //注意return的符号，不是单引号
                                    return `<div>${data.name} <div> 目前确诊人数:${data.value}</div></div>`
                                }
                            },
                            visualMap: [{
                                orient: "vertical",
                                type: "piecewise",
                                pieces: [ // 配置颜色区间
                                    {
                                        min: 0,
                                        max: 0,
                                        color: "#FFFFFF"
                                    },
                                    {
                                        min: 1,
                                        max: 100,
                                        color: "#FDFDCF"
                                    },
                                    {
                                        min: 100,
                                        max: 1000,
                                        color: "#FE9E83"
                                    },
                                    {
                                        min: 1000,
                                        max: 5000,
                                        color: "#E55A4E"
                                    },
                                    {
                                        min: 5000,
                                        max: 100000000,
                                        color: "#4F070D"
                                    }
                                ]
                            }],
                            series: [{
                                name: "国",
                                type: "map",
                                map: 'world',
                                zoom: 1.2, //放大
                                roam: true, //悬停缩放
                                nameMap: worldName, //映射国家的名字
                                label: {
                                    show: false, //是否显示省份名称
                                    fontSize: 9,
                                },
                                data
                            }],
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    },
                }
            }
        }
    })
}
export default install